<!--
 * @Author: Zhangxx 2425792130@qq.com
 * @Date: 2024-06-18 09:41:04
 * @LastEditors: Zhangxx 2425792130@qq.com
 * @LastEditTime: 2024-06-18 09:47:07
 * @FilePath: \vue-shelf\src\views\card\cardsIndex.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="card-container">
      <div v-for="(item, index) in items" :key="index" class="card" @click="handleClick(item)" :checked="selectedItems.includes(item.id)" @change="handleCheck(item)">
        <div class="card-icon">
          <svg viewBox="0 0 24 24">
            <path d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9.81 14.81l-4.24-4.24L10.22 8.22l.78.78L14.81 12.81z" />
          </svg>
        </div>
        <div class="card-text">
          {{ item.name }}
          <span>{{ item.description }}</span>
        </div>
        <!-- <div class="card-checkbox">
          <input type="checkbox" :checked="selectedItems.includes(item.id)" @change="handleCheck(item)">
        </div> -->
      </div>
    </div>
  </template>
  
  <script lang="ts" setup>
  import { ref } from 'vue';
  
  interface Item {
    id: string;
    name: string;
    description: string;
  }
  
  const items = ref<Item[]>([
    { id: 'antiSaccade', name: 'AntiSaccade', description: '反眼跳任务' },
    { id: 'vpc', name: 'VPC', description: '视觉配对比较任务' },
    { id: 'visMET', name: 'VisMET', description: '视空间记忆眼动追踪任务' },
  ]);
  
  const selectedItems = ref<string[]>([]);
  
  const handleClick = (item: Item) => {
    console.log(item.id); // 处理点击事件
  };
  
  const handleCheck = (item: Item) => {
    if (selectedItems.value.includes(item.id)) {
      selectedItems.value = selectedItems.value.filter(id => id !== item.id);
    } else {
      selectedItems.value.push(item.id);
    }
  };
  </script>
  
  <style scoped>
  .card-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  
  .card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px;
    width: 200px;
    height: 120px;
    border: 1px solid #ccc;
    border-radius: 5px;
    cursor: pointer;
  }
  
  .card-icon {
    margin-bottom: 10px;
  }
  
  .card-text {
    margin-bottom: 5px;
    font-size: 14px;
    font-weight: bold;
  }
  
  .card-text span {
    font-size: 12px;
    font-weight: normal;
    color: #666;
  }
  
  .card-checkbox {
    display: flex;
    align-items: center;
  }
  
  .card-checkbox input[type="checkbox"] {
    margin-right: 5px;
  }
  
  .card:hover {
    background-color: #f5f5f5;
  }
  </style>